<template>
    <!-- pages/myset/resetpassword/index.wxml -->
    <view class="page-wrapper">
        <form @submit.stop.prevent="formSubmit">
            <view class="item-card">
                <view class="item-warp">
                    <image :src="imgUrl + 'setpaypassword-icon.png'"></image>
                    <input name="oldPassword" placeholder="请输入旧密码" :password="true" />
                </view>
                <view class="item-warp">
                    <image :src="imgUrl + 'setpaypassword-icon.png'"></image>
                    <input name="password" placeholder="请输入新密码" :password="true" />
                </view>
                <view class="item-warp">
                    <image :src="imgUrl + 'setpaypassword-icon.png'"></image>
                    <input name="copyPassword" placeholder="请再次输入新密码" :password="true" />
                </view>
            </view>

            <view class="item-pwd" @tap="forgetPwd">
                <text>忘记密码</text>
            </view>

            <button class="btn-bg" formType="submit">提交</button>
        </form>
    </view>
</template>

<script>
// pages/myset/resetpassword/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl //全局img路径
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        formSubmit(e) {
            console.log('form发生了submit事件，携带数据为：', e.detail.value);

            if (e.detail.value && !e.detail.value.oldPassword) {
                uni.showToast({
                    title: '请输入旧密码!',
                    icon: 'none'
                });
                return;
            }

            if (e.detail.value && !e.detail.value.password) {
                uni.showToast({
                    title: '请输入新密码!',
                    icon: 'none'
                });
                return;
            }

            if (e.detail.value && !e.detail.value.copyPassword) {
                uni.showToast({
                    title: '请再次输入新密码!',
                    icon: 'none'
                });
                return;
            }

            if (e.detail.value && e.detail.value.copyPassword !== e.detail.value.password) {
                uni.showToast({
                    title: '两次密码不一致, 请重新输入!',
                    icon: 'none'
                });
                return;
            }

            let pars = { ...e.detail.value, userId: uni.getStorageSync('userid') };
            console.log('pars: ', pars);

            _request.postObj('/settings/accountSafe/updatePassword', pars).then((res) => {
                if (res.data.code == 200) {
                    uni.navigateTo({
                        url: '/pages/login/index'
                    });
                } else {
                    uni.showToast({
                        title: res.data.message || '设置失败!',
                        duration: 1500,
                        icon: 'none'
                    });
                }
            });
        },

        forgetPwd() {
            uni.navigateTo({
                url: '/pages/register/index'
            });
        }
    }
};
</script>
<style>
/* pages/myset/resetpassword/index.wxss */
.page-wrapper {
    height: 100vh;
    background: #fbfbfb;
}
.item-card {
    background: white;
    margin: 24rpx;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    padding: 0 24rpx;
}

.item-warp {
    display: flex;
    padding: 24rpx;
}
.item-warp:not(:last-child) {
    border-bottom: 1px solid #ececec;
}
.item-warp image {
    width: 42rpx;
    height: 48rpx;
}

.item-warp input {
    flex: 1;
    margin: 0 24rpx;
}

.btn-bg {
    margin: 100rpx 32rpx 0;
    background: #ff8722;
    border-radius: 22px;
    color: white;
}

.item-pwd {
    display: flex;
    justify-content: flex-end;
    margin: 24rpx;
}
</style>
